<template>
  <view class="page">
    <!-- 主要内容区 -->
    <view class="content">
      <!-- 数据管理板块 -->
      <view class="section-list">
        <text class="section-title">数据管理</text>
        <view class="card">
          <view class="setting-item" @click="navTo('/pages/setExper/setExper')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/shiyanfangan.png"/>
              <text class="font-default">实验方案</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="navTo('/pages/experhistory1/experhistory1')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/lishijilu (2).png"/>
              <text class="font-default">历史记录</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="navTo('/pages/equipdiary/equipdiary')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/project_full (1).png"/>
              <text class="font-default">设备日志</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>
        </view>
      </view>

      <!-- 通用设置板块 -->
      <view class="section-list">
        <text class="section-title">通用设置</text>
        <view class="card">
          <view class="setting-item" @click="navTo('/pages/allequips/allequips')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/shebeimingcheng.png"/>
              <text class="font-default">设备名称</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="navTo('/pages/laboratorymanage/laboratorymanage')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/weizhiguanli (2).png"/>
              <text class="font-default">位置管理</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="navTo('/pages/gujianshengji/gujianshengji')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/gujianshengji (2).png"/>
              <text class="font-default">固件升级</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="navTo('/pages/sharingequip/sharingequip')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/tongxingfenxi.png"/>
              <text class="font-default">设备共享</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="navTo('/pages/allequips/allequips')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/changyong.png"/>
              <text class="font-default">常用设备</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>
        </view>
      </view>

      <!-- 账号相关板块 -->
      <view class="section-list">
        <text class="section-title">账号相关</text>
        <view class="card">
          <view class="setting-item" @click="navTo('/pages/paschange/paschange')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/xiugaimima.png"/>
              <text class="font-default">修改密码</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="navTo('/pages/userinfo/userinfo')">
            <view class="setting-content">
              <image class="icon" src="../../static/images/bianji12.png"/>
              <text class="font-default">编辑资料</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>

          <view class="divider"></view>

          <view class="setting-item" @click="toLogout()">
            <view class="setting-content">
              <image class="icon" src="../../static/images/tuichudenglu.png"/>
              <text class="font-default logout-text">退出登录</text>
            </view>
            <uni-icons type="right" size="14" color="#999"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapMutations} from 'vuex';
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons},
  props: {},
  data() {
    return {
      items: [null, null, null],
    };
  },

  methods: {
    ...mapMutations(['logout']),
    navTo(url) {
      uni.navigateTo({url});
    },
    toLogout() {
      uni.showModal({
        content: '确定要退出登录吗',
        success: (e) => {
          if (e.confirm) {
            this.logout();
            setTimeout(() => {
              uni.reLaunch({url: '/pages/login/login'});
            }, 200);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f7f7f7;
}

.header {
  background: linear-gradient(180deg, #138f87 0%, #44cdbd 100%);
  padding: 88rpx 32rpx 32rpx;
  
  .header-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: 500;
  }
}

.content {
  margin-top: -20rpx;
  border-radius: 20rpx 20rpx 0 0;
  background: #f7f7f7;
  min-height: 100vh;
  padding: 20rpx 0;
}

.section-list {
  margin-top: 20rpx;
  padding: 0 32rpx;
  margin-bottom: 32rpx;

  .section-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
    padding-left: 16rpx;
  }

  .card {
    background: #fff;
    border-radius: 12rpx;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  }

  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    margin: 0 -32rpx;
    transition: background-color 0.25s;

    &:active {
      background-color: #f0f0f0;
    }

    .setting-content {
      display: flex;
      align-items: center;

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 24rpx;
      }

      .font-default {
        font-size: 30rpx;
        color: #333;
      }

      .logout-text {
        color: #ff3b30;
      }
    }
  }

  .divider {
    height: 1rpx;
    background-color: #f5f5f5;
    margin: 0 -32rpx;
  }
}
</style>